<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册账号</title>
		<style type="text/css">
			body {
				text-align: center;
			}
			
			.tip-fail {
				color: red;
			}
			
			.tip-success {
				color: green;
			}
			
			.msg {
				color: red;
			}
			
			.btn>button {
				width: 300px;
				height: 48px;
				background-color: #2ad181;
				color: #fff;
				border: transparent;
				border-radius: 9px;
			}
			
			.btn>button:hover {
				background-color: rgb(34,169,104);
				cursor: pointer;
				transition:0.5s;
			}
			
			.sign-in {
				width: 380px;
				height: 540px;
				background-color: rgb(246, 247, 250);
				border-radius: 10px;
				margin: 50px auto;
			}
			
			div {
				margin: 30px;
			}
			
			.username {
				width: 270px;
				height: 25px;
				outline: none;
				border: none;
				padding: 10px 15px;
				border-radius: 9px;
			}
			
			.title {
				padding: 20px;
			}
			
			.sign-up>a {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div class="sign-in">

			<div class="title">
				<h2>注册账号</h2>
			</div>

			<form action="/user/sign/up" method="post">
				<div>
					<input type="text" name="username" placeholder="用户名" class="username" >
					<span class="username-tip">
				</div>
				<div>
					<input type="password" name="password" placeholder="密码" class="username">
				</div>
				<div>
					<input type="password" name="confirm" placeholder="确认密码" class="username">
				</div>
				<div class="btn">
					<button type="submit">注册</button>
				</div>
				<div class="msg">
					{{message}} {{error}}
				</div>
				<div class="sign-up">
					已有账号？
					<a href = "/user/sign/in">返回登录</a>
				</div>
			</form>
		</div>
		<script src="/async.js" ></script>
	</body>

</html>